<script setup lang='ts'>
import utils from "@/utils/index"
import  firstScreenStore    from '@/store/firstScreenStore'
import { nextTick } from 'vue';
  const res_click  =firstScreenStore()


  nextTick(()=>{
    document.documentElement.addEventListener("click",()=>{
      res_click.isClick=false  //还要阻止点击事件的冒泡
    })
})
 
 const setFlash=()=>{
     sessionStorage.setItem("flash","flash_current_page")
  }
</script>
<template>

<div class="grid grid-cols-1 gap-10">

     <!-- 遮罩 -->
   <div class="zhezhao  block md:hidden" v-show="res_click.isClick" @click.stop>
        
            <ul >
        
        <li> 
             <router-link :to="{name:'admin.home'}" 
              @click="res_click.isClick=true" class= " box1  user-rate-style !bg-pink-300 ">后台管理</router-link>
    </li>
        <li>
          <router-link :to="{name:'rate'}"
            @click="res_click.isClick=true" class="  box1 user-rate-style ">参与评价</router-link>

        </li>
        <li>
          <router-link :to="{name:'about'}" 
           @click="res_click.isClick=true" class=" box1 user-rate-style  !bg-purple-400  ">关于我们</router-link>

        </li>
        <li>
          <router-link :to="{name:'auth.login'}" 
           @click="res_click.isClick=true"
            v-if="!utils.user.isLogin()" class="box1 user-rate-style ">用户登录</router-link>
  <router-link :to="{}" v-else 
  class=" box1 user-islogin-style ">用户已登录</router-link>
        </li>
       </ul>
       
   </div>
    <img src="../../../public/imgs/collage.jpeg" class="w-40 h-40 object-cover 
          rounded-full border-8 border-white mb-4" />
 <div class="flex justify-center items-center rounded-lg -ml-5">
    <router-link @click="setFlash()" :to="{name:'blogger.content.index'}" class="user-islogin-style  ">
        <h1 class="text-[20px]">开始学习</h1>
        <p class="text-sm">上次学习时间:2022-9-13 13:00</p>
    </router-link>
    
 </div>

</div>
 
</template>
<style scoped lang='scss'>


 @media screen and (max-width:768px) {


.zhezhao{
    @apply absolute top-[44px]  left-0     w-1/3 h-full 
     bg-slate-700  z-40;
}
.box1{
   @apply text-[5px] mt-3 ml-2;
}

}


 .user-islogin-style{
    @apply bg-green-400 text-white  p-3 mr-3  block
         py-2 rounded-md   hover:bg-green-700 duration-500 text-xs md:text-[15px]
 }
 
 .user-rate-style{
    @apply  text-white  p-3 mr-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 block
         py-2 rounded-md   duration-500 text-xs md:text-[15px]
 }

</style>